<template>
    <view>
        <block v-if="zwlist && zwlist.length > 0">
            <view class="zw-li" @click="onItemClick(item)" v-for="(item, index) in zwlist" :key="index">
                <view class="nova-column">
                    <view class="nova-row-center">
                        <text class="title">{{ getTypeName(item) }}</text>
                        <text class="up-tag">{{ getUpTag(item) }}</text>
                        <text style="flex: 1;"></text>
                        <view class="nova-row-center">
                            <image src="../../static/img/watch.png" style="width: 30rpx; height: 30rpx;"></image>
                            <text class="num">{{item.number}}</text>
                        </view>
                    </view>
                    <view class="nova-row-center" style="padding: 20rpx 0;">
                        <image class="loc-icon" style="width: 18rpx; height: 22rpx;" src="../../static/zw/zw_loc.png"></image>
                        <text class="loc">{{ getVillageName(item) }}</text>
                    </view>
                    <view class="nova-row-center" style="padding-top: 0rpx;">
                        <text class="loc">发布时间：{{ getPublishTime(item) }}</text>
                    </view>
                    <view class="nova-row-center" style="justify-content: space-around; margin-top: 20rpx;">
                        <view class="btn-primary-invert btn nova-flex nova-flex-center" @click.stop="goEdit(item)">编辑</view>
                        <view class="btn-primary-invert btn nova-flex nova-flex-center republish" @click.stop="republish(item)">重新发布</view>
                    </view>
                </view>
            </view>
        </block>
        <view class="nothing" v-if="zwlist.length == 0">
            <image src="/static/img/nothing.png" />
            <view style="text-align:center">暂无相关数据</view>
        </view>
    </view>
</template>

<script>
import conf from '../../common/conf.js';
export default {
    data() {
        return {
            searchshow: false,
            page: 'yz-publish',
            reload: false,
            zwlist: [],
            form: {
                pagenum: 6,
                pages: 0
            }
        };
    },
    created() {
        uni.$on('jobStatusChange', this.jobStatusChange);
    },
    destroyed() {
        uni.$off('jobStatusChange');
    },
    methods: {
        jobStatusChange(e) {
            console.log(e);
            if (e.refresh) {
                this.refresh();
                return;
            }
            let pos = -1;
            this.zwlist.forEach((item, index) => {
                if (item.publish_id == e.publish_id) {
                    pos = index;
                    if (e.remove) {
                        return;
                    }
                    if (e.job_status) {
                        item.job_status = e.job_status;
                    }
                    if (e.job_process) {
                        item.job_process = e.job_process;
                    }
                }
            });
            console.log('pos', pos);
            if (e.remove && pos >= 0) {
                this.zwlist.splice(pos, 1);
            }
        },
        onItemClick(item) {
            if (this.$checkIdentification()) {
                uni.navigateTo({
                    url: `../c/p-job-detail?&page=${this.page}&publish_id=${item.publish_id}&job_status=${item.job_status}`
                });
            }
        },
        goEdit(item) {
            uni.navigateTo({
                url: '../c/p-publish-job?publish_id=' + item.publish_id
            });
        },
        async republish(item) {
            let res = await this.$request.post({
                url: '/aunt/mine/resetPublish',
                data: {
                    publish_id: item.publish_id
                }
            });
            this.$toast('重新发布成功');
        },
        async loadData() {
            this.form.pages++;
            let res = await this.$request.post({
                url: '/aunt/mine/myList',
                data: this.form
            });
            if (this.reload) {
                this.zwlist = res || [];
            } else {
                this.zwlist = this.zwlist.concat(res);
                // if (res.length < this.form.pagenum) {
                //     this.form.pages--;
                // }
            }
            this.reload = false;
            uni.stopPullDownRefresh();
        },
        refresh() {
            this.reload = true;
            this.form.pages = 0;
            this.loadData();
        },
        loadMore() {
            this.loadData();
        },
        getTypeName(item) {
            let type = item.type;
            if (type > 0 && type < conf.ayTypes.length) {
                return conf.ayTypes[type];
            }
            return '其它';
        },
        getUpTag(item) {
            // 阿姨状态
            return this.$getJobStatus(item.job_status);
        },
        getVillageName(item) {
            return item.village_id;
        },
        getPublishTime(item) {
            return item.publish_time;
        }
    },
    onPullDownRefresh() {
        this.refresh();
    },
    onReachBottom() {
        this.loadMore();
    },
    onLoad() {
        this.loadData();
    }
};
</script>

<style lang="scss">
.zw-li {
    position: relative;
    padding: 34rpx;
    &:after {
        @include divider(34rpx);
    }
    .title {
        font-size: 32rpx;
        color: #333333;
    }
    .loc-icon {
        width: 18rpx;
        height: 22rpx;
        margin-right: 6rpx;
    }
    .loc {
        font-size: 24rpx;
        color: #666666;
    }

    .tag {
        background-color: #f2f2f2;
        border-radius: 6rpx;
        font-size: 24rpx;
        color: #999999;
        height: 36rpx;
        line-height: 36rpx;
        min-width: 117rpx;
        margin-right: 24rpx;
    }
    .up-tag {
        font-size: 16rpx;
        border-radius: 6rpx;
        width: 64rpx;
        height: 24rpx;
        position: relative;
        top: -12rpx;
        background-color: $uni-color-primary;
        line-height: 24rpx;
        text-align: center;
        color: white;
        margin-left: 20rpx;
    }
    .num {
        color: #FF0214;
        line-height: 30rpx;
        font-size: 28rpx;
        padding-left: 6rpx;
    }
    .price {
        font-size: 30rpx;
        color: $uni-color-primary;
    }
    .unit {
        font-size: 22rpx;
        color: $uni-color-primary;
    }
    .time {
        font-size: 22rpx;
        color: #999;
    }
    .btn {
        width: 240rpx;
        height: 60rpx;
        color: $uni-color-primary;
        font-size: 28rpx;
        &:after {
            @include border-1px($uni-color-primary, 6rpx);
            border-radius: 10rpx;
        }
    }
}
</style>
